import React from 'react'
import { incre, decre, asyncIncre } from '../../redux-n/slices/countSlice';
import {incre as inc, decre as dec} from '../../redux-n/slices/zanSlice';
//导入 react-redux 中的 hoooks
// useSelector  获取 redux 中保存的状态
// useDispatch  获取 dispatch 函数
import { useSelector, useDispatch } from 'react-redux';
export default function ReduxNew() {
  //获取状态    useSelector(state => state); // 获取 redux 保存的所有状态
  let countValue = useSelector(state => state.count);
  let zanValue = useSelector(state => state.zan);
  //获取 dispatch 函数 来分发任务
  let dispatch = useDispatch();

  //声明函数
  let add = () => {
    dispatch(incre(1));
  }
  //减数
  let minus = () => {
    dispatch(decre(1));
  }
  //异步更新
  let asyncAdd = () => {
    dispatch(asyncIncre(10))
  }
  
  return (
    <div style={{padding: '50px'}}>
      <h2>当前的状态为 {countValue.value}</h2>
      <hr />
      <button onClick={add}> +1 </button>
      <button onClick={minus}> -1 </button>
      <button onClick={asyncAdd}> 1秒后 +10 </button>
      <hr />
      <h2>点赞数: {zanValue.value}</h2>
      <button onClick={() => {
         dispatch(inc(1))
      }}>+1</button>
      <button onClick={() => {
        dispatch(dec(1));
      }}>-1</button>
    </div>
  )
}
